<template>
  <div class="newframe">
    <div class="new-items" v-for="items in newsarticle" :key="items.key">
      <div class="topexhbg">
        <img :src="items.linkbg" />
      </div>
      <div class="cont">
        <h2>{{ items.title }}</h2>
        <p>
          {{ items.content }}
        </p>
      </div>
      <div class="newbottom flclear">
        <div class="userleft">
          <a href="">
            <img :src="items.user.headportrait" alt="" />
            <span>{{ items.user.username }}</span>
          </a>
        </div>
        <div class="shareright">
          <a href="">
            <img src="../assets/global-img/share-weixin.svg" alt="微信" />
          </a>
          <a href="">
            <img src="../assets/global-img/share-weibo.svg" alt="微博" />
          </a>
          <a href="">
            <img src="../assets/global-img/share-qq.svg" alt="QQ空间" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['newsarticle'],
  data(){
      return {
      }
  },
  mounted(){
  }
}
</script>
<style scoped lang="scss">
.newsarticle {
  .newframe {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    .new-items {
      min-width: 430px;
      height: 580px;
      box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.02);
      border-radius: 15px;
      overflow: hidden;
      margin-right: 30px;
      background: #fff;
      transition:  all 0.5s;
      border: none;
      box-sizing: border-box;
      .topexhbg {
        width: 100%;
        height: 290px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          transition: all 0.5s;
        }
      }

      .cont {
        width: 100%;
        height: auto;
        h2 {
          text-align: left;
          width: 198px;
          font-size: 22px;
          font-weight: 500;
          color: #010101;
          line-height: 35px;
          max-width: 360px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin: 32px 0 21px;
          margin-left: 32px;
        }
        p {
          max-width: 360px;
          height: 70px;
          font-size: 16px;
          color: #010101;
          line-height: 35px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-left: 32px;
          margin-bottom: 41px;
        }
      }
      .newbottom {
        width: 100%;
        height: auto;
        width: 370px;
        border-top: 1px solid #f1f1f1;
        padding-top: 27px;
        margin: 0 auto;
        .userleft {
          float: left;
          line-height: 35px;
          vertical-align: middle;
          img {
            width: 35px;
            height: 35px;
            vertical-align: middle;
            margin: 0;
            font-size: 0;
          }
          span {
            font-size: 16px;
            color: #010101;
            line-height: 35px;
            margin-left: 10px;
          }
        }
        .shareright {
          float: right;
          margin-top: 7px;
          box-sizing: border-box;
          padding: 0 5px;
          a {
            display: inline-block;
            width: 26px;
            height: 21px;
            margin-left: 15px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .new-items:hover {
      background: #ebebeb96;
      .topexhbg img{
        transform: scale(1.1);
      }
    }
    .new-items:last-child {
      margin: 0;
    }
  }
  .other {
    margin-top: 95px;
  }
}
</style>